<style>
    .czbtn{
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
        color: rgb(252,84,49);
        margin: 0 auto;
        font-size: 0.24rem;
    }
    .btnBorder{
        border-left: 1px solid black;
    }
    .czbtn2{
        width: 1rem;
        height: 0.5rem;
        font-size: 0.25rem;
        line-height: 0.5rem;
        text-align: center;
        color: white;
        margin: 0 auto;
        border-radius: 3px
    }
    .searchBtn{
        border-radius: 3px;
        width: 80px;
        margin-left: 5px;
        height: 35px; line-height: 35px; text-align: center;background-color: rgb(255,85,46);color: white
    }
    .item-text{
        padding: 1px;
        color: black
    }
    .language {
        margin: 5px;
        font-size: 0.22rem;
    }
    .languageSelect{
        width: 18px;
        margin-right: 5px;
        background: white;
        color: black;
        border: 0;
        height: 18px;
        padding: 0;
    }
    .imgBJPC{
        text-align: center;
        padding-left: 15px;
        max-height: 225px;
        overflow: hidden;
    }
    .imgBJ{
        text-align: center;
        padding-left: 15px;
        max-height: 70px;
        overflow: hidden;
    }
</style>
<div class="bui-page bui-box-vertical" id="articleListLoading">
    <div class="ignore" style="background-color: rgb(255,85,46);min-height: 30px;line-height: 30px;color: white;text-align: right" id="languageContent">
    </div>
    <header>
        <div class="bui-bar" style="background-color: rgb(255,85,46)">
            <div class="bui-bar-left">
                <!-- 左边有图标示例 -->
                <div class="bui-btn btn-back" id="articleListFh"><i class="icon-back"></i>首页</div>
            </div>
            <div class="bui-bar-main">文章列表</div>
            <div class="bui-bar-right">
                <!-- 右边有图标示例 -->
            </div>
        </div>
    </header>
    <main>
        <div class="bui-box">
            <div class="span1">
                <ul class="bui-list">
                    <li class="bui-btn bui-box clearactive" id="lbSelect">
                        <div class="bui-label">类别：</div>
                        <div class="span1">
                            <div id="chooseTypeEdit" class="bui-box">
                                <div class="selected-vals2"></div>
                                <div class="selected-vals2"></div>
                                <div class="selected-vals2"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="span1">
                <div id="provinceSelect" class="bui-btn bui-box">
                    <div class="bui-label">来源：</div>
                    <div class="span1">请选择</div>
                </div>
            </div>
        </div>
        <div class="bui-box">
            <div class="span1">
                <div id="statusSelect" class="bui-btn bui-box">
                    <div class="bui-label">状态：</div>
                    <div class="span1">请选择</div>
                </div>
            </div>
            <div class="span1">
                <div id="zdSelect" class="bui-btn bui-box">
                    <div class="bui-label">置顶：</div>
                    <div class="span1">请选择</div>
                </div>
            </div>
        </div>
        <div class="header-search-input bui-box" style="padding: 13px 5px;background: white">
            <div class="bui-input span1" style="-webkit-border-radius: 0;">
                <input id="search" type="text" placeholder="请输入搜索关键字" style="width: 100%; border: 1px solid;border-radius: 5px;height: 35px;">
            </div>
            <div id="searchBtn" class="searchBtn">搜索</div>
        </div>
        <div id="articleScrollList" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list bui-list-thumbnail">

                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>
        <div id="qrcodeHb" style="background: linear-gradient(to bottom, rgb(98,196,168), rgb(200,240,232)); border-radius: 8px; width: 300px; height: 400px;margin: 0 auto;display: none">
            <div class="bui-box" style="height: 68px">
                <div class="span1" style="padding-left: 14px">
                    <p id="typeStr" style="color: white;font-size: 0.3rem;font-weight: bold;margin: 0;margin-top: 13px;padding: 0;text-align: left;padding-left: 11px">
                    </p>
                    <p style="margin: 0;text-align: left">
                        <img src="images/wz.png" style="width: 10px">
                        <span style="color: white;font-size: 0.25rem" id="position"></span>
                    </p>
                </div>
                <div class="span2" style="text-align: inherit;padding-right: 7px;">
                    <img src="images/headBj.png" style="width: 180px;margin-top: 6px;margin-right: -20px;">
                </div>
            </div>
            <div style="margin: 0 auto;width: 90%;height: 80%;border-radius: 10px;background: white;">
                <div class="bui-btn bui-box" style="border-top-left-radius: 10px;border-top-right-radius: 10px;height: 62px">
                    <div style="width: 40px;margin-right: 10px;">
                        <img width="40px" height="40px" style="border-radius: 10px" id="avater">
                    </div>
                    <div class="span1">
                        <p id="userName" style="margin: 0;padding: 0;padding-left: 10px;font-size: 0.23rem;color: black"></p>
                        <p id="timeCity" style="font-size: 0.2rem; color: rgb(157,157,159)"></p>
                    </div>
                </div>
                <div style="color: black;font-size: 0.25rem;text-align: left;padding: 10px;height: 180px;">
                    <div id="articleContent">

                    </div>
                    <div id="lookQw" style="width: 40px;height: 13px;line-height: 13px;font-size: 0.14rem;text-align: center;color: rgb(67,155,138);background: rgb(230,244,242);border-radius: 2px;margin-top: 4px;display: none">
                        查看全文
                    </div>
                    <div class="bui-box" id="imgs1" style="display: none;margin-top: 10px">
                        <!--                            <div class="span1 '+picClass+'">-->
                        <!--                                <img src="'+el.imgs[i]+'?x-oss-process=style/index" alt="">-->
                        <!--                            </div>-->
                    </div>
                </div>
                <div style="border-bottom: 1px solid rgb(236,236,238);"></div>

                <div class="bui-box" style="height: 52px;overflow: hidden">
                    <div class="span1" style="padding-top: 2px">
                        <p style="color: black;font-size: 0.292rem;margin: 0;padding-left: 10px;">
                            海外最火的国人线上社区！
                        </p>
                        <div class="bui-box" style="padding-left: 10px">
                            <div class="span1">
                                <div style="color: rgb(189,129,64); background: rgb(246,239,221);height: 18px;line-height: 18px;width: 90%;font-size: 0.17rem;">
                                    充值缴费
                                </div>
                            </div>
                            <div class="span1">
                                <div style="color: rgb(72,156,44); background: rgb(226,244,246);height: 18px;line-height: 18px;width: 90%;font-size: 0.17rem;">
                                    生活服务
                                </div>
                            </div>
                            <div class="span1">
                                <div style="color: rgb(110,87,163); background: rgb(241,232,251);height: 18px;line-height: 18px;width: 90%;font-size: 0.17rem;">
                                    咨询交流
                                </div>
                            </div>
                            <div class="span1">
                                <div style="color: rgb(195,66,94); background: rgb(254,230,243);height: 18px;line-height: 18px;width: 90%;font-size: 0.17rem;">
                                    万人社群
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <img style="width: 60px;object-fit: contain;" id="qrcode">
                    </div>
                </div>
                <div class="bui-box">
                    <div style="font-size: 0.22rem;color:black;font-weight: bold;text-align: left;padding-left: 10px;">
                        <img src=""> 海外同城
                    </div>
                    <span class="span1" style="text-align: right">
                                <p style="font-size: 0.15rem;color: rgb(140,140,140)">扫码查看完整图文和更多精彩</p>
                            </span>
                </div>
            </div>
        </div>
        <!-- 中间自定义弹出框结构	 -->
        <div id="scQrcodeDialog" class="bui-dialog" style="display: none;width: 320px;height: 450px">
            <div class="bui-dialog-head">文章二维码</div>
            <div class="bui-dialog-main">
                <img style="width: 290px;object-fit: contain;display: none" id="showQrcodePic">
                <div id="downloadQrcode" class="czbtn" style="background: orange;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;display: none">
                下载二维码
                </div>
            </div>
            <div class="bui-dialog-close"><i class="icon-close"></i></div>
        </div>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>
